<template>
  <!-- 报文解析 弹窗 -->
  <a-modal
    v-model:open="visible"
    title="报文解析"
    class="messageParseModal"
    destroyOnClose
    :width="800"
    @cancel="handleCancel"
    centered
    :footer="null"
  >
    <div class="messageParseContent">
      <div class="selectorContainer">
        <a-form-item label="选择报文类型：" :labelCol="labelCol">
          <a-select
            v-model:value="selectedMessageType"
            placeholder="请选择报文类型"
            class="messageSelector"
            @change="handleMessageTypeChange"
            :loading="selectorLoading"
            :show-search="true"
            optionFilterProp="label"
            allow-clear
          >
            <a-select-option
              v-for="item in messageTypeOptions"
              :key="item.key"
              :value="item.key"
              :label="item.key"
            >
              <div class="optionContent">
                <span class="optionKey">{{ item.key }}</span>
                <span class="optionDesc" v-if="item.desc">{{ item.desc }}</span>
              </div>
            </a-select-option>
          </a-select>
        </a-form-item>
      </div>

      <!-- JSON渲染区域 -->
      <div class="jsonContainer">
        <div class="jsonHeader">
          <span class="jsonTitle">
            报文解析结果
            <a-button
              class="yellowBtn"
              size="small"
              style="float: right"
              @click="handleMessageTypeChange(selectedMessageType)"
              >刷新请求</a-button
            >
          </span>
        </div>
        <div class="jsonContent" v-if="jsonData">
            <JsonViewer
              :value="jsonData"
              :expand-depth="5"
              :expanded="true"
              copyable
              boxed
              sort
              theme="dark"
            />
        </div>
        <div class="emptyState" v-else>
          <div class="emptyText">请选择报文类型查看解析结果</div>
        </div>
      </div>
    </div>
  </a-modal>
</template>

<script setup>

import { JsonViewer } from "vue3-json-viewer";
import "vue3-json-viewer/dist/vue3-json-viewer.css";
const $api = inject("$api");
const props = defineProps({
  messageParseVisible: {
    type: Boolean,
    default: false,
  },
  rowData: {
    type: Object,
    default: () => ({}),
  },
});

const emits = defineEmits(["update:messageParseVisible"]);

const visible = ref(props.messageParseVisible);
const selectedMessageType = ref(null);
const messageTypeOptions = ref([]);
const jsonData = ref(null);
const selectorLoading = ref(false);
const labelCol = { style: { width: "120px" } };

// 监听弹窗显示状态
watch(
  () => props.messageParseVisible,
  (val) => {
    visible.value = val;
    if (val) {
      // 弹窗打开时初始化数据
      initMessageTypes();
      resetData();
    }
  }
);

// 初始化报文类型选项
const initMessageTypes = async () => {
  selectorLoading.value = true;
  const res = await $api.mqttAclNewPayloadType(props.rowData.id);
  selectorLoading.value = false;
  if (res?.data) {
    messageTypeOptions.value = Object.entries(res.data).map(([key, value]) => ({
      value: key,
      key: key,
      desc: value || null,
    }));
    // 默认选中第一个
    selectedMessageType.value = messageTypeOptions.value[0]?.value;
    handleMessageTypeChange(selectedMessageType.value);
  }
};

// 处理报文类型切换
const handleMessageTypeChange = async (value) => {
  const selectVal = value;
  selectedMessageType.value = value;
  if (!selectVal) {
    jsonData.value = null;
    return;
  }
  const res = await $api.mqttAclNewPayload(props.rowData.id, selectVal);
  if (res?.data) {
    jsonData.value = res.data;
  }
};

// 重置数据
const resetData = () => {
  selectedMessageType.value = undefined;
  jsonData.value = null;
};

// 处理取消
const handleCancel = () => {
  emits("update:messageParseVisible", false);
  resetData();
};
</script>

<style lang="less" scoped>
.messageParseModal {
  :deep(.ant-modal-body) {
    padding: 20px;
    max-height: 70vh;
    overflow-y: auto;
  }
}

.messageParseContent {
  .selectorContainer {
    margin: 20px 0;

    .messageSelector {
      width: 630px;
    }
  }

  .jsonContainer {
    border: 1px solid #d9d9d9;
    border-radius: 6px;
    // background: #fafafa;
    min-height: 400px;

    .jsonHeader {
      padding: 12px 16px;
      border-bottom: 1px solid #d9d9d9;
      // background: #f5f5f5;
      border-radius: 6px 6px 0 0;

      .jsonTitle {
        font-weight: 500;
        color: #f5f5f5;
      }
    }

    .jsonContent {
      padding: 16px;
      background: #1e1e1e;
      border-radius: 0 0 6px 6px;
      min-height: 350px;

      :deep(.jv-container) {
        background: #1e1e1e !important;

        .jv-code {
          background: #1e1e1e !important;
          max-height: 620px !important;
        }
      }
    }

    .emptyState {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 350px;
      color: #8c8c8c;

      .emptyText {
        font-size: 14px;
      }
    }
  }
}

.ant-form-item {
  margin-bottom: 0;
}
.optionContent {
  width: 100%;

  .optionKey {
    text-align: left;
  }

  .optionDesc {
    color: #8c8c8c;
    font-size: 12px;
    float: right;
  }
}
</style> 